<template>
  <div class="account-padding">
    <div class="my-account">第三方APP</div>
    <div class="account-row-item">
      <div class="account-label gray-75">企业微信绑定</div>
      <span>
        <icon-font :style="!bindData.bindWechat ? { color: '#9e9e9e' } : { color: '#1ec563' }" class="item-icon" type="icon-qiyeweixin3" />
        <span class="gray-75" style="margin-left: 12px">企业微信</span>
        <span class="gray-75" style="margin-left: 8px" v-if="bindData.bindWechat">{{ '已绑定：' + bindData.weChatName }}</span>
        <span class="blue-e5 pointer" style="margin-left: 24px" @click="wechatBind">{{ !bindData.bindWechat ? '绑定' : '解绑' }}</span>
      </span>
    </div>
    <div class="account-row-item">
      <div class="account-label gray-75">钉钉绑定</div>
      <span>
        <DingtalkCircleFilled :style="!bindData.bindDing ? { color: '#9e9e9e' } : { color: '#1ec563' }" class="item-icon" />
        <span class="gray-75" style="margin-left: 12px">钉钉</span>
        <span class="gray-75" style="margin-left: 8px" v-if="bindData.bindDing">{{ '已绑定：' + bindData.dingName }}</span>
        <span class="blue-e5 pointer" style="margin-left: 24px" @click="dingDingBind">{{ !bindData.bindDing ? '绑定' : '解绑' }}</span>
      </span>
    </div>
  </div>
</template>
<script lang="ts" setup name="we-chat-ding-setting">
import { onMounted, ref, reactive } from 'vue';
import { CollapseContainer } from '@/components/Container';
import { getUserData } from './UserSetting.api';
import { useUserStore } from '@/store/modules/user';
import { useModal } from '@/components/Modal';
import { DingtalkCircleFilled, createFromIconfontCN } from '@ant-design/icons-vue';

const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_2316098_umqusozousr.js',
});
const userDetail = ref<any>([]);
const userStore = useUserStore();
const bindData = reactive<any>({
  bindWechat: false,
  weChatName: '昵称',
  bindDing: false,
  dingName: '昵称',
});

/**
 * 初始化钉钉和企业微信数据
 */
function initUserDetail() {}

/**
 * 微信绑定解绑事件
 */
function wechatBind() {
  console.log('微信绑定解绑事件');
}

/**
 * 钉钉绑定解绑事件
 */
function dingDingBind() {
  console.log('钉钉绑定解绑事件');
}

onMounted(() => {
  initUserDetail();
});
</script>
<style lang="less" scoped>
.account-row-item {
  align-items: center;
  border-bottom: 1px solid #eaeaea;
  box-sizing: border-box;
  display: flex;
  height: 71px;
  position: relative;
}

.account-label {
  text-align: left;
  width: 160px;
}

.gray-75 {
  color: #757575 !important;
}

.pointer {
  cursor: pointer;
}

.blue-e5 {
  color: #1e88e5;
}

.phone-margin {
  margin-left: 24px;
  margin-right: 24px;
}

.clearfix:after {
  clear: both;
}

.clearfix:before {
  content: '';
  display: table;
}
.account-padding {
  padding: 30px 40px 0 20px;
}
.my-account {
  font-size: 17px;
  font-weight: 700 !important;
  color: #333 !important;
  margin-bottom: 20px;
}
</style>
